<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>demo1</title>
</head>
<body>
    <h1>一级标题</h1>
    <h2>二级标题</h2>
    <h3>三级标题</h3>

    <!-- 图片标签 -->
    <img src="../background.jpg" alt="图片加载失败" width="200px" border="2px"><br>
    <img src="./background.jpg" alt="图片加载失败" width="200px" border="2px"><br/>
    
    <!-- 换行标签 -->
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rem incidunt.<br/>
    Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rem incidunt.<br/>
    
    <!-- 段落标签 -->
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rem incidunt.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis rem incidunt.</p>
  
    <!-- 超链接 -->
    <a href="https://www.baidu.com/" target="_blank" >百度</a><br/>
    <a href="https://www.baidu.com/" target="_self" >百度</a><br/>
    <a href="#" target="_self" >空链接</a><br/>
   
    <!-- 表格标签 -->
      <!-- 快捷方式：table>tr*3>th*2 -->
     <table border="1px" cellspacing="0px" cellpadding="20px" align="center">
        <!-- border表示边框 
         cellspacing表示单元格之间的距离 
         cellpadding表示内容距离边框的距离 
         align表示表格相对于周围元素的对齐方式 -->
        <tr>
            <td>aaa</td>
            <td colspan="2">bbb</td> <!-- 合并列单元格 -->
            <!-- <td>111</td> -->
        </tr>
        <tr>
            <td>ccc</td>
            <td>ddd</td>
            <td rowspan="2">222  </td> <!-- 合并行单元格 -->
        </tr>
        <tr>
            <td>eee</td>
            <td>fff</td>
            <!-- <td>333</td> -->
        </tr>
     </table>

     <!-- 表单标签 -->
      <!-- form表示表单域（作用域）action表示提交到哪里 method表示提交的方式（请求方式）-->
    <form action="hello.html" method="get">
        <!-- 1、input标签 -->
        <input type="button" value="提交"><br/><!-- 没有提交功能，但可以搭配js实现提交功能 -->
        <button>提交</button><br><!-- 有提交功能，但没有将数据传输给后端-->
        <input type="text" value="是一个文本框"><br/>
        <input type="number" value="123"><span>只能输入数字</span><br>
        姓名：<input type="text" name="userName" id="" placeholder="请输入姓名"><br>
        密码：<input type="password" name="psw" id=""><br>
        性别：<input type="radio" name="gender" id="male" value="0"><label for="male">男</label>
        <input type="radio" name="gender" id="female" value="1"><label for="female">女</label><br>
        <!-- name表示传给后端的参数名称
        input标签中name=""将两个radio(单选按钮)绑定在一起 
        label标签中for=""把id进行绑定-->
        兴趣爱好：<input type="checkbox" name="hobby" id="badminton" value="1"><label for="badminton">羽毛球</label>
        <input type="checkbox" name="hobby" id="football" value="2"><label for="football">足球</label>
        <input type="checkbox" name="hobby" id="basketball" value="3"><label for="basketball">篮球</label>
        <input type="checkbox" name="hobby" id="table_tennis" value="4" checked><label for="table_tennis">乒乓球</label><br>
        <!-- checked表示默认选择
            input标签中name=""checkbox(复选框)绑定在一起 
            value用于区分绑定在一起的数据，传给后端的时候可以区分出来-->
         <input type="submit" value="提交"><br><!-- 将数据传输给后端，
         这个必须在form表单域中，且只会提交表单域中的数据-->
         <!-- 2、select标签 -->
          <select name="edu" id="">
            <option value="1">小学</option>
            <option value="2">初中</option>
            <option value="3">高中</option>
            <option value="4" selected >高中及以上</option><!-- 表示默认选择 -->
          </select><br>
    </form>
<!-- 无语义标签 -->
 <div> <!-- 可以看成一个大盒子，独占一行，块级元素 -->
    <span><!-- 可以看成一个小盒子，不独占一行，行内元素 -->
        111
    </span>
    <span><!-- 方便加入css样式 -->
        222
    </span>
    <span>
        333
    </span>
 </div>
  <div>
    <span>
        444
    </span>
    <span>
        555
    </span>
    <span>
        666
    </span>
 </div>
 
</body>
</html>